<template>
  <div class="create-layout">
    <!-- 主体 -->
    <div id="main-create" class="main" style="align-items: flex-start;">
      <div class="fixed-box flex" :style="{left :leftWidth}">
        <cell-header :title="'创建广告'" :type="1" style="align-items: flex-start;" />

        <div class="time_box" v-if="slideShow!==0">
          <time-zone-box></time-zone-box>
        </div>
      </div>
      <div class="view-box">
        <router-view @closeSlider="closeSlider">
          <div v-if="slideShow!==0" class="create-steps">
            <div style="height: 454px;">
              <el-steps direction="vertical" :active="slideShow-1" finish-status="success">
                <el-step
                  :title="$route.query.type==='self-help'?'创建广告系列':'选择秘钥并创建广告系列'"
                  description="广告系列包含预算和广告组，以app的具体推广策略为核心"
                  @click.native="goBeforeStep(1)"
                />
                <el-step title="创建广告组" description="广告组包含定价目标和设置，用于确定谁有可能看到你的广告" @click.native="goBeforeStep(2)" />
                <el-step title="支付并开始投放" />
              </el-steps>
            </div>
          </div>
        </router-view>

      </div>
    </div>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import cellHeader from '@/components/cell-header.vue'
import timeZoneBox from '@/components/timeZoneBox/index.vue'
export default {
  components: {
    cellHeader,
    timeZoneBox
  },
  data() {
    return {
      titleName: undefined,
      slideShow: false // 是否关闭侧边栏
    }
  },

  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    key() {
      return this.$route.name !== undefined ? this.$route.name + new Date() : this.$route + new Date()
    },

    opened() {
      return this.sidebar.opened
    },
    device() {
      return this.$store.state.app.device
    },
    leftWidth() {
      if (this.device === 'mobile') {
        return '0px'
      } else {
        if (!this.opened) {
          return '80px'
        } else {
          return '240px'
        }
      }
    }
    //      slideShow() {
    //        let type
    //        const name = this.$route.name
    //        // console.log(name, '路由名称')

    //        return type
    //      }

  },

  watch: {
    $route: {
      immediate: true,
      handler: function(val, oldVal) {
        var type = 0
        this.titleName = this.$route.meta.title
        const name = this.$route.name
        switch (name) {
          case 'Createtype':
            type = 0
            break
          case 'CreateSeries':
            type = 1
            break
          case 'CreateGroup':
            type = 2
            break
          case 'CreatePut':
            type = 3
            break
        }

        if (this.$route.query.create !== 'new') {
          type = 0
        }

        this.slideShow = type
        // 子路由跳转的时候 页面滚动到顶部
        this.$nextTick(() => {
          const el = document.getElementById('main-create')
          el.scrollTop = 0
        })
      },
      // 深度观察监听
      deep: true
    }
  },
  mounted() {

  },
  methods: {
    closeSlider() {
      this.slideShow = 0
    },
    goBeforeStep(num) {
      if (this.slideShow <= num) return false
      if (num === 1) {
        this.$router.replace({
          name: 'CreateSeries',
          query: { ...this.$route.query
          }
        })
      } else {
        this.$router.go(-1)
      }
    }
  }
}
</script>

<style lang="scss" scoped="true">
  @import '~@/styles/variables.scss';

  .time_box {
    position: fixed;
    right: 0;
    margin-right: 20px;
    // right: 0;
    // margin-right:
    // right: 13%;
    // display: flex;
    // justify-content:center;
  }

  .create-layout {
    display: flex;
    height: 100%;

    .fixed-box {
      padding: 0 24px;
      padding-top: 24px;
      width: 100vw;
      position: fixed;
      top: $navBarHeight;
      z-index: 99;
      background-color: #f9f9f9;
      transition: left 0.3s;
    }
    .main {

      flex: 1;
      // min-height: calc(100% - 10px);
      // &::-webkit-scrollbar {
      //   width: 0 !important;
      //   -ms-overflow-style: none;
      //   overflow: -moz-scrollbars-none;
      // }
    }
    .create-steps {
      margin-left: 14px;
      width: 208px;
      padding-top: 30px;
      padding-left: 24px;
      background-color: #FFFFFF;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      margin-bottom: 24px;
      // background-color: red;
      .fixed {
        position: fixed;
        top: 50%;
        right: 24px;
        width: 280px;
        transform: translateY(-50%);
      }
      /deep/.el-step__icon {
        z-index: 0;
      }
      ::v-deep.el-step__title.is-process,
      ::v-deep.el-step__title.is-wait,
      ::v-deep.el-step__title.is-success {
        padding-bottom: 32px;
        font-size: 16px;
        line-height: 24px;
        .el-step__icon {
          height: 20px;
          width: 20px;
          z-index: 0;
        }
      }

      ::v-deep.el-step__head.is-wait {
        .el-step__icon {
          border: none;
          background: #ACB6C2;

          .el-step__icon-inner {
            color: #FFFFFF;
          }
        }
      }

      ::v-deep.el-step__description {
        font-size: 14px;
        line-height: 24px;

      }

      ::v-deep .el-steps.el-steps--vertical .is-process .el-step__icon.is-text {
        color: white !important;
        background-color: $mainColor1;
        border: none !important;
        z-index: 0;

      }

      ::v-deep .el-steps.el-steps--vertical .is-success {
        color: #8F939B !important;
      }

      ::v-deep .el-steps .el-step__line {
        width: 2px;
        background-color: #bdc5cc !important;
        opacity: 0.5;
        border: none !important;
        top: 42px;
        bottom: 14px;
      }

      ::v-deep .el-steps .el-step__line .el-step__line-inner {
        display: none;
      }

      ::v-deep .el-steps.el-steps--vertical .is-success .el-step__icon.is-text {
        color: $mainColor1 !important;

        border-color: $mainColor1 !important;

      }
    }
  }

  // 子路由的一些公共样式
  .view-box {
    padding-top: 40px;

    ::v-deep.card-box {
      margin-bottom: 24px;

      .el-card__body {
        padding: 12px;
        padding-left: 48px;
        position: relative;

        .img {
          display: inline-block;
          width: 24px;
          height: 24px;
          margin-right: 24px;
          background-color: #FFFFFF;
          border-radius: 4px;
          position: absolute;
          top: 50%;
          left: 12px;
          transform: translate(0%,-50%);
          .iconfont{
            font-size: 22px;
            color: #ACB6C2;
          }

        }
      }

    }

    ::v-deep .el-form-item {
      margin-bottom: 30px;
      line-height: 1;
    }

    ::v-deep .before-set {
      P {
        font-size: 14px;
        display: inline-block;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 24px;
        margin-right: 24px;
        display: inline-block;
        color: rgba(51, 64, 74, 0.8);
      }
    }

    ::v-deep .btn-list {
      .el-button {
        width: 150px;
        height: 50px;
        border: 1px solid #BDC5CB;
        border-radius: 4px;
        margin-right: 40px;
      }

      .el-button--primary {
        border-color: #3F9FFF;
      }
    }

    ::v-deep .set-box {
      .set-title {
        padding: 20px 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 24px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;

        // line-height: 30px;
      }
    }

    ::v-deep form {

      .add-btn {
        width: 100%;
        background: #FFFFFF;
        border: none;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        color: $mainColor1;
      }

      .el-select,
      .el-input-number,
      .el-form-item__content,
      .el-input,
      .el-input__inner {
        width: 100%;
        max-width: 486px;

        .el-tag {
          font-size: 12px;
        }

      }

      .el-input-number input {
        text-align: left;

      }

      .el-input-number .el-input {
        position: relative;

        // &::after {
        //   display: inline-block;
        //   content: '$';
        //   color: rgba(172, 182, 194, 1);
        //   position: absolute;
        //   top: 0;
        //   right: 1em;
        //   font-size: 16px;
        // }
      }

      .is-required .label {
        text-indent: 1em;
        position: relative;

        &::after {
          display: inline-block;
          content: '*';
          color: #F56C6C;
          margin-right: 4px;
          position: absolute;
          top: 0;
          left: -1em;
        }
      }

      label.el-form-item__label,
      .label {
        padding: 0;
        padding-bottom: 12px;
        line-height: 14px;
        font-size: 14px;

        span {
          font-size: 14px;
        }
      }

      .label {
        display: flex;
        align-items: center;
        font-weight: bold;

        i {
          color: #C6C6C6;
          font-size: 14px;
        }
      }
    }
  }
</style>
